<template>
  <uni-nav-bar title="加注地址" left-icon="left" @clickLeft="navBack" statusBar></uni-nav-bar>
  <view :style="{ display: curPage === 'map' ? 'none' : 'block'}">
    <view class="package space-between">
      <view style="width:70%;">{{locName}}</view>
      <view class="center" style="color:#1B91FF;" @click="chooseLocation">地图定位<uni-icons type="location-filled"
          size="23" color="#1B91FF"></uni-icons></view>
    </view>
    <view class="package">
      <view style="color:#666;">历史记录</view>
      <view :style="{height:pageHeight+'px',margin:'15rpx 0px'}">
        <view class="list" v-for="item in getHistoryList" @click="pitchOn(item)"
          :style="{color:locName==item.address?'#1B91FF':''}">{{item.address}}</view>
        <Popu v-if="getHistoryList.length<1" :pageHeight="pageHeight" text="暂历史地址"></Popu>
      </view>
      <view class="but" @click="submit()">确定</view>
    </view>
  </view>
  <!-- 选择地址列表 -->
  <view v-if="curPage === 'map'"><web-view :src="mapURI"></web-view></view>
  <!-- 当前位置经纬度 -->
  <Lotlats @position="position"></Lotlats>
</template>

<script setup lang="ts">
  import { ref, Ref } from 'vue';
  import { navBack, navTo } from '@/utils/navigator';
  import Popu from '@c/earthPushing/common/popu.vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { toPublish } from '@mqtt';
  import { showLoading, errorToast } from '@/utils/prompt';
  import { getHistoryAddress } from '@/gql/reservation';
  import { getDriverID } from '@/stores/driverID';
  import Lotlats from '@c/team/Lotlat.vue';
  const driver_id = getDriverID();
  const pageHeight = ref('');
  const getHistoryList = ref([])
  // data
  const curPage : Ref<'form' | 'map'> = ref('form');
  const longitude = ref()
  const latitude = ref()
  const mapURI = ref('');
  const locName = ref('')
  const type = ref()
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = (res.windowHeight - 270).toString();
    },
  });
  onLoad((pearm) => {
    type.value = pearm.name
    locName.value = pearm.name
    init()
  })
  function init() {
    showLoading()
    const payload = {
      query: getHistoryAddress,
      variables: {
        driver_id
      },
    };
    toPublish(
      'ql/plug/getHistoryAddress',
      payload,
      (obj : any) => {
        uni.hideLoading();
        const { getHistoryAddress } = obj.data;
        getHistoryList.value = getHistoryAddress
      }
    );
  }
  function position(lat : number, lot : number) {
    longitude.value = lot;
    latitude.value = lat;
  }
  /**
   * 跳转到地址列表 选择位置信息
   */
  function chooseLocation() {
    mapURI.value = `https://apis.map.qq.com/tools/locpicker?coord=${latitude.value},${longitude.value}&search=1&type=1&key=URFBZ-F4TKI-SLPGX-57GMO-ZHYM6-BCFSL&referer=安蓝环保`;
    curPage.value = 'map';
    function msgListener(event : any) {
      // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
      var loc = event.data;
      if (loc && loc.module == 'locationPicker') {
        console.log(JSON.stringify(loc) + '*****')
        curPage.value = 'form';
        longitude.value = loc.latlng.lng;
        latitude.value = loc.latlng.lat;
        locName.value = loc.poiname
        //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
        window.removeEventListener('message', msgListener);
      }
    }
    window.addEventListener('message', msgListener, false);
  }
  function pitchOn(item : any) {
    longitude.value = item.longitude;
    latitude.value = item.latitude;
    locName.value = item.address
  }
  function submit() {
    if (type.value !== locName.value) {
      const lots = {
        longitude: longitude.value,
        latitude: latitude.value,
        locName: locName.value
      }
      uni.setStorageSync('Appointment', lots);
    }
    navBack()
  }
</script>

<style scoped lang="less">
  .but {
    width: 530rpx;
    height: 96rpx;
    background: #1B91FF;
    border-radius: 48rpx;
    text-align: center;
    line-height: 96rpx;
    color: #fff;
    margin: 0rpx auto;
  }

  .list {
    width: 100%;
    padding: 30rpx 0px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
  }
</style>